<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Главная </title>
    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'/>
    <link rel="stylesheet" type="text/css" href="/css/template.css"/>
    <link rel="stylesheet" type="text/css" href="/css/gallery.css"/>
    <link rel="stylesheet" type="text/css" href="/css/dark.css"/>
    <link rel="stylesheet" type="text/css" href="/css/buttons.css"/>
    <link href='http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="/css/data_table/jquery.dataTables.css"/>
    <link rel="stylesheet" type="text/css" href="/css/data_table/jquery.dataTables_themeroller.css"/>
    <link rel="stylesheet" type="text/css" href="/css/basic/basic.css"/>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet"
          type="text/css"/>


    <script type="text/javascript" src="/js/jquery-1.8.2.js"></script>
    <script type="text/javascript" src="/js/jquery.easing.min.js"></script>
    <script type="text/javascript" src="/js/jquery.lavalamp.min.js"></script>
    <script type="text/javascript" src="/js/cufon.yui.js"></script>
    <script type="text/javascript" src="/js/myriad.js"></script>
    <script type="text/javascript" src="/js/menu.js"></script>
    <script type="text/javascript" src="/js/data_table/jquery.dataTables.js"></script>
    <script type="text/javascript" src="/js/basic/jquery.simplemodal.js"></script>
    <script type="text/javascript" src="/js/jquery.easing.min.js"></script>
    <script type="text/javascript" src="/js/jquery.easing.compatibility.js"></script>

    <script type="text/javascript" src="/js/menu.js"></script>



    <script type="text/javascript">


        $('document').ready(function () {
            $('#lanters').dataTable();

            var rules = {
                rules:{
                    description:{
                        required:true
                    },
                    document_file:{
                        required:true
                    },
                    price:{
                        digits:true,
                        required:true
                    },
                    lanter_cat:{
                        required:true
                    }
                },
                messages:{
                    lanter_cat:{
                        required:"это поле обязательно для заполнения"
                    },

                    description:{
                        required:"это поле обязательно для заполнения"
                    },
                    document_file:{
                        required:"это поле обязательно для заполнения"
                    },
                    price:{
                        digits:"Это поле должно быть числом",
                        required:"это поле обязательно для заполнения"
                    }
                }
            }


            $("#add_form").validate(rules);
            $("#lantern_form").validate(rules);

        });

        function deleteLantern(id) {
            $.ajax({
                type:"POST",
                url:"/admin/removelantern.html",
                data:{lantern_id:id},
                success:function (json) {
                    var $tr = $('#lanter_' + id);
                    $tr.remove();
                    $('#lanters').dataTable();
                }
            });

        }

        function updateLantern(id) {
            $.ajax({
                type:"POST",
                url:"/admin/getlantern.html",
                data:{lantern_id:id},
                success:function (json) {
                    $('#basic-modal-content').modal();
                    $.each(json, function (key, value) {
                        if (key == 'description') {
                            $('#description').val(value);
                        } else if (key == 'price') {
                            $('#price').val(value);
                        } else if (key == 'category') {
                            $('#cat').val(value["idCategory"]);
                        } else if (key == 'idLantern') {
                            $('#lantern_form').append('<input type="hidden" name="id" value=' + value + '>');
                        }
                    });
                }
            });
        }

    </script>
</head>

<body>
<div class="container_16">



    <div class="grid_16 content">
        <div class="grid_10">
            <table cellpadding="0" cellspacing="0" border="0" class="display" id="lanters">
                <thead>
                <tr>
                    <th>Описание</th>
                    <th>Картинка</th>
                    <th>Цена</th>
                    <th>Категория</th>
                    <th>Действие</th>
                </tr>
                </thead>

                <tbody>
                <c:forEach var="lant" items="${lanterns}">
                <tr id="lanter_${lant.idLantern}">
                    <td>${lant.description}</td>
                    <td><a href="#" class="dev_img"><img
                            src="${lant.imgUrl}"
                            alt="${lant.imgUrl}"
                            width="60px;"/></a></td>
                    <td>${lant.price}</td>
                    <td>${lant.category.categoryTitle}</td>
                    <td>
                        <a href="javascript:void(0);" onclick="updateLantern('${lant.idLantern}')"
                           title="Редактировать">
                            <img src="/img/icons/edit_icon.png" alt="Редактировть"/>
                        </a>
                        &nbsp;
                        <a href="javascript:void(0);" onclick="deleteLantern('${lant.idLantern}')"
                           title="Удалить">
                            <img src="/img/icons/delete_icon.png" alt="X"/>
                        </a>
                    </td>
                </tr>
                </c:forEach>
                <tbody>
            </table>
        </div>

        <div class="grid_6">
            <div>
                <form action="/admin/addlantern.html" method="POST" enctype="multipart/form-data" id="add_form">

                    <p><label for="description">Описани:&nbsp;</label>
                        <input name="description" value=""/></p>

                    <p><label for="document_file">Выберите картинку:&nbsp;</label>
                        <input type="file" name="document_file"/>
                    </p>

                    <p><label for="price">Цена:&nbsp;</label>
                        <input name="price" value=""/></p>

                    <select name="lanter_cat" id="add_cat" style="width:540px !important;">
                        <option value="">---Выберите категорию---</option>

                        <c:forEach var="cat" items="${category}">
                            <option value="${cat.idCategory}">${cat.categoryTitle}</option>
                        </c:forEach>
                    </select>


                    <div class="center_button">
                        <button type=" submit">Готово</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


<div id="basic-modal-content">
    <form action="/admin/addlantern.html" method="POST" enctype="multipart/form-data" id="lantern_form">

        <p><label for="description">Описани:&nbsp;</label>
            <input name="description" id="description" value=""/></p>

        <p><label for="document_file">Выберите картинку:&nbsp;</label>
            <input type="file" name="document_file" id="document_file"/>
        </p>

        <p><label for="price">Цена:&nbsp;</label>
            <input name="price" id="price" value=""/></p>

        <select name="lanter_cat" id="cat" style="width:540px !important;">
            <option value="">---Выберите категорию---</option>

            <c:forEach var="cat" items="${category}">
                <option value="${cat.idCategory}">${cat.categoryTitle}</option>
            </c:forEach>
        </select>


        <div class="center_button" id="apply">
            <button type=" submit">Готово</button>
        </div>
    </form>
</div>

</body>
</html>